<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/vue.js"></script>
    <style type="text/css">
        /* 设置 id 为 app 的元素的样式，包括宽度、高度、外边距、边框和内边距 */
        #app {
            width: 78%;
            height: 300px;
            margin: 0 auto;
            border: solid 1px gray;
            padding: 1% 1% 1% 5%;
        }
        /* 设置 #app 元素中的 h2 元素的字体大小 */
        #app h2 {
            font-size: 16px;
        }
        /* 设置名为 course 的类的元素的样式，包括宽度、右边距、浮动、下外边距和右边框 */
      .course {
            width: 46%;
            margin-right: 3%;
            float: left;
            margin-bottom: 1%;
            border-right: dashed 1px gray;
        }
        /* 设置名为 inner 的类的元素的样式，包括宽度、左边填充、上下内边距 */
      .inner {
            width: 68%;
            padding-left: 32%;
            /*border: solid 1px red;*/
            padding-top: 10px;
            padding-bottom: 10px;
        }
        /* 设置名为 des 的类的元素的样式，包括宽度、溢出处理、文本溢出处理和空白处理 */
      .des {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* 设置名为 index-board-vue 的类的元素的背景图片 */
      .index-board-vue {
            background: url(img/1.jpg) no-repeat;
			background-size: 100px 100px;
        }
        /* 设置名为 index-board-js 的类的元素的背景图片 */
      .index-board-js {
            background: url(img/3.jpg) no-repeat;
			background-size: 100px 100px;
        }
        /* 设置名为 index-board-html 的类的元素的背景图片，并设置背景大小 */
      .index-board-html {
            background: url(img/2.jpg) no-repeat;
            background-size: 100px 100px;
        }
        /* 设置名为 index-board-java 的类的元素的背景图片 */
      .index-board-java {
            background: url(img/4.jpg) no-repeat;
			background-size: 100px 100px;
        }
        /* 设置名为 line-last 的类的元素的边框为无 */
      .line-last {
            border: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-for 指令遍历 boardList 数组，并为每个元素创建一个具有 course 类的 div 元素，同时动态设置类名 -->
		<!-- [{'line-last' : index % 2!== 0}]：这是一个对象，其中键 'line-last' 对应的值是一个条件表达式 index % 2!== 0 。
		如果当前索引 index 除以 2 的余数不为 0（即索引为奇数），那么就会应用 line-last 这个类名；否则不应用 -->
		<!-- 'index-board-' + item.id：根据当前循环中的元素对象 item 的 id 属性值动态生成类名。
		例如，如果 item.id 的值是 'vue' ，那么生成的类名就是 'index-board-vue'  -->
        <div class="course" v-for="(item, index) in boardList" :class="[{'line-last' : index % 2!== 0}, 'index-board-' + item.id]">
            <div class="inner">
                <!-- 显示课程标题 -->
                <h2>{{ item.title }}</h2>
                <!-- 显示课程描述 -->
                <p class="des">{{ item.description }}</p>
                <div class="btn">
                    <!-- 购买按钮 -->
                    <button>
              立即购买
             </button>
                </div>
            </div>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        /* 创建一个名为 vm 的 Vue 实例 */
        var vm = new Vue({
            el: "#app",  // 指定 Vue 实例挂载的元素
            data: {  // 定义数据
                boardList: [  // 课程列表数组
                    {
                        title: 'Vue课程',  // 课程标题
                        description: '一套用于构建用户界面的渐进式框架。',  // 课程描述
                        id: 'vue',  // 课程标识
                        toKey: 'analysis',  // 其他属性
                        saleout: false  // 其他属性
                    },
                    {
                        title: 'JavaScript课程',
                        description: '是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。',
                        id: 'js',
                        toKey: 'count',
                        saleout: false
                    },
                    {
                        title: 'HTML课程',
                        description: '超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。',
                        id: 'html',
                        toKey: 'forecast',
                        saleout: true
                    },
                    {
                        title: 'Java课程',
                        description: '是一门面向对象编程语言',
                        id: 'java',
                        toKey: 'publish',
                        saleout: false
                    }
                ],
            }
        })
    </script>
</body>
</html>